// 从cookie中获取存起来的用户名
var username = getCookie('username')
// 判断用户是否登录
if (username) {
    $('.pagetop-content p').html(`
	汪，欢迎来天猫~
        <a href="userInfo.html" target="_Blank"  style="font-size:14px;">${username}</a> 用户
		<a onclick="logout()" target="_Blank">退出登录</a>
    `)
} else {
    layer.msg('请先登录', {
        icon: 2,
        time: 1000
    }, function () {
        // 强行跳转到登录页
        location.href = 'login.html?callback=' + location.href
    })
}
// 定义退出函数
function logout() {
    // 询问层
    layer.confirm('你确定要退出吗？', {
        btn: ['残忍离开', '考虑一下']
    }, function () {
        // 将内容还原
        $('.pagetop-content p').html(`
		汪，欢迎来天猫
			<a href="login.html" target="_Blank">请登录</a>
			<a href="register.html" target="_Blank">免费注册</a>
		`)
        // 删除cookie
        removeCookie('username')
        removeCookie('userId')
        localStorage.removeItem('token')
        layer.msg('退出成功', {
            icon: 1,
            time: 1500
        })
    }, function () {
        layer.msg('取消成功', {
            icon: 1,
            time: 1500
        })
    })
}
// 如果登录成功
// 发送请求获取购物车数据
$.ajax({
    url: 'http://localhost:8888/cart/list',
    data: {
        id: getCookie('userId')
    },
    headers: {
        authorization: localStorage.getItem('token') || ''
    }
}).then(res => {
    console.log(res);
    if (!res.cart.length) {
        showEmpty()
        return false
    }
    if (res.code === 1) {
        var html = ''
        res.cart.forEach((item) => {
            html += `
                <tr>
                    <td data-id="${item.goods_id}"><input type="checkbox" class="checkBox" ${item.is_select ? 'checked' : ''} name="product"></td>
                    <td><img src="${item.img_small_logo}"></td>
                    <td>${item.title}</td>
                    <td name="goodsprice" class="current_price">${item.current_price}</td>
                    <td class="goods">
                        <div id="goods-num" data-id="${item.goods_id}" data-stock="${item.goods_number}">
                            <a href="javascript:void(0)" class="reduce">-</a>
                            <input type="text" name="goodsnum" value="${item.cart_number}" class="goodsnum">
                            <a href="javascript:void(0)" style="right: 0;" class="add">+</a>
                        </div>
                    </td>
                    <td name="goodssum" class="price">${item.cart_number*item.current_price}</td>
                    <td><a href="javascript:void(0)" data-id="${item.goods_id}" style="color: red;" class="del">删除</a></td>
                </tr>
            `
        })
        $('#tablestyle tbody').html(html)
        // ajax数据渲染以后再写功能
        // 全选功能
        selectAll()
        // 是否所有单选都选中
        var bool = res.cart.every(item => item.is_select)
        $('.allcheck').prop('checked', bool)
        // 单选功能
        selectOne()
        // 数量加减功能
        addAndReduce()
        // 删除一条数据
        remove()
        // 删除选中的商品
        removeSelect()
        // 清空购物车
        clearCart()
        // 小计和总价
        count()
    }
})

// 全选功能
function selectAll() {
    // 给两个全选复选框绑定单击事件
    $('.allcheck').click(function () {
        //  选中所有单选
        // console.log(2222);
        $('.checkBox').prop('checked', $(this).prop('checked'))
        // 设置全选
        $('.allcheck').prop('checked', $(this).prop('checked'))
        count()
        // 发送请求修改全部商品的选中状态
        $.ajax({
            url: 'http://localhost:8888/cart/select/all',
            method: 'post',
            headers: {
                authorization: localStorage.getItem('token') || ''
            },
            data: {
                id: getCookie('userId'),
                type: $(this).prop('checked') ? 1 : 0
            }
        }).then(res => {
            console.log(res);
        })
    })
}

// 单选功能
function selectOne() {
    // 给所有的单选绑定单击事件
    $('.checkBox').click(function () {
        // 判断是否全部选中
        var arr = [].slice.call($('.checkBox'))
        var bool = arr.every(item => item.checked)
        $('.allcheck').prop('checked', bool)
        count()

        // 发送请求 修改一条数据修改的选中状态
        // 获取当前商品的id
        var goodsId = $(this).parent().attr('data-id')
        $.ajax({
            url: 'http://localhost:8888/cart/select',
            method: 'post',
            headers: {
                authorization: localStorage.getItem('token') || ''
            },
            data: {
                id: getCookie('userId'),
                goodsId
            }
        }).then(res => {
            // console.log(res);
        })
    })
}

// 数量加减功能
function addAndReduce() {
    // +
    $('.add').click(function () {
        var num = +$(this).prev().val() //获取当前商品数量的数字
        num++
        if (num > $(this).parent().attr('data-stock')) {
            return false
        }
        $(this).prev().val(num) //重新渲染数字
        count()

        // 发送请求
        var goodsId = $(this).parent().attr('data-id')
        // console.log(goodsId);
        $.ajax({
            url: 'http://localhost:8888/cart/number',
            method: 'post',
            headers: {
                authorization: localStorage.getItem('token') || ''
            },
            data: {
                id: getCookie('userId'),
                goodsId,
                number: num
            }
        }).then(res => {
            // console.log(res);
        })
    })
    // -
    $('.reduce').click(function () {
        var num = +$(this).next().val() //获取当前商品数量的数字
        num--
        if (num < 1) {
            return false
        }
        $(this).next().val(num) //重新渲染数字
        count()

        // 发送请求
        var goodsId = $(this).parent().attr('data-id')
        // console.log(goodsId);
        $.ajax({
            url: 'http://localhost:8888/cart/number',
            method: 'post',
            headers: {
                authorization: localStorage.getItem('token') || ''
            },
            data: {
                id: getCookie('userId'),
                goodsId,
                number: num
            }
        }).then(res => {
            // console.log(res);
        })
    })
    // 手动修改数量
    $('.goodsnum').on('input', function () {
        // console.log(222);
        var num = +$(this).val()

        if (num > $(this).parent().attr('data-stock')) {
            num = $(this).parent().attr('data-stock')
        }
        if (num < 1) {
            num = 1
        }

        $(this).val(num)
    })
    $('.goodsnum').on('blur', function () { // 光标失去焦点事件
        var num = $(this).val()
        count()

        // 发送请求
        var goodsId = $(this).parent().attr('data-id')
        $.ajax({
            url: 'http://localhost:8888/cart/number',
            method: 'post',
            headers: {
                authorization: localStorage.getItem('token') || ''
            },
            data: {
                id: getCookie('userId'),
                goodsId,
                number: num
            }
        }).then(res => {
            // console.log(res);
        })
    })
}
// 删除一条数据
function remove() {
    $('.del').click(function () {
        // console.log(555);
        layer.confirm('你确定要删除吗？', {
            btn: ['确定', '取消']
        }, () => {
            // 删除
            // console.log(this);
            $(this).parents().eq(1).remove()
            //  发送请求删除
            var goodsId = $(this).attr('data-id')
            $.ajax({
                url: 'http://localhost:8888/cart/remove',
                headers: {
                    authorization: localStorage.getItem('token') || ''
                },
                data: {
                    id: getCookie('userId'),
                    goodsId,
                }
            }).then(res => {
                if (res.code === 1) {
                    if (!$('#tablestyle tbody>tr').length) {
                        showEmpty()
                    }
                    layer.msg('删除成功', {
                        icon: 1,
                        time: 1500
                    })
                }
            })
            layer.msg('删除成功', {
                icon: 1,
                time: 1500
            })
        }, function () {
            // 取消
            layer.msg('取消成功', {
                icon: 1,
                time: 1500
            })

        })

    })
}
// 删除选中的商品
function removeSelect() {
    $('#deleteBut').click(function () {
        layer.confirm('确定要删除吗？', {
            btn: ['确定', '取消']
        }, function () {
            // 确定删除
            // 将选中的商品从html结构中删除
            var input = $('.checkBox:checked').each((i, v) => {
                var p = $(v).parents().eq(1).remove()
                // console.log(p);
            })
            // console.log(input);
            // 发送请求
            $.ajax({
                url: 'http://localhost:8888/cart/remove/select',
                headers: {
                    authorization: localStorage.getItem('token') || ''
                },
                data: {
                    id: getCookie('userId'),
                }
            }).then(res => {
                if (res.code === 1) {
                    if (!$('#tablestyle tbody>tr').length) {
                        showEmpty()
                    }
                    layer.msg('删除成功', {
                        icon: 1,
                        time: 1500
                    })
                }
            })


        }, function () {
            // 取消删除
            layer.msg('取消成功', {
                icon: 1,
                time: 1500
            })
        })
    })
}
// 清空购物车
function clearCart() {
    $('#clearBut').click(function () {
        layer.confirm('你真的要清空吗？', {
            btn: ['确定', '取消']
        }, function () {
            // 删除所有商品
            $('#tablestyle tbody').remove()
            // 发送请求清空购物车
            $.ajax({
                url: 'http://localhost:8888/cart/clear?id=' + getCookie('userId'),
                headers: {
                    authorization: localStorage.getItem('token') || ''
                }
            }).then(res => {
                // console.log(res);
                if (res.code === 1) {
                    // 给购物车页面放一个没有商品的提示
                    showEmpty()
                    layer.msg('清空成功', {
                        icon: 1,
                        time: 1500
                    })
                }
            })
        }, function () {
            layer.msg('取消成功', {
                icon: 1,
                time: 1500
            })
        })
    })
}
// 购物车没有数据的展示
function showEmpty() {
    $('.container').html(`
        <div>
            <a href="index.html">
                <img src="https://img1.baidu.com/it/u=2396415280,2420254561&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=303" width="100%" />
            <a>
        </div>
    `)
}

// 小计和总价
function count() {
    // 小计
    $('.current_price').each((i, v) => {
        var price = +$(v).text()
        var num = +$(v).next().find('.goodsnum').val()
        var xiaoji = price * num
        // console.log($(v).next().next());
        $(v).next().next().text(xiaoji)
    })
    // 总价/数量
    var totalNum=0
    var totalPrice=0
    $('.checkBox:checked').each((i,v) =>{
        var num=+$(v).parent().siblings('.goods').find('.goodsnum').val()
        totalNum +=num
        var price= +$(v).parent().siblings('.price').text()
        totalPrice +=price
    })
     // console.log(totalNum);
     console.log(totalPrice);
     $('#tablefoot>ul>span p').text(totalNum)
     $('#allmoney').text(totalPrice)

}